<template>
  <span>
    <span @click="$emit('click', $event)" class="icon-button" :title="getTitle">
      <i :class="iconClass"></i>
    </span>
    <slot></slot>
  </span>
</template>

<script>
var nameMap = {
  add: "add-line",
  caretdown: "arrow-down-s-line",
  authors: "quill-pen-fill",
  back: "arrow-go-back-line",
  book: "book-line",
  bookmark: "bookmark-3-fill",
  brush: "brush-fill",
  collaboration: "service-line",
  collection: "book-2-line",
  comments: "chat-1-line",
  clock: "time-line",
  delete: "delete-bin-5-fill",
  "delete-2": "delete-bin-2-line",
  edit: "edit-line",
  elink: "external-link-fill",
  emotion: "emotion-line",
  era: "ancient-pavilion-line",
  eye: "eye-fill",
  "eye-close": "eye-close-line",
  field: "function-line",
  file: "file-line",
  flag: "flag-2-line",
  friends: "user-heart-line",
  folder: "folder-fill",
  genre: "stack-line",
  github: "github-fill",
  grid: "layout-grid-fill",
  group: "group-line",
  heart: "heart-line",
  history: "history-line",
  home: "home-line",
  hot: "fire-line",
  heat: "fire-fill",
  info: "question-line",
  language: "code-line",
  list: "list-unordered",
  medal: "medal-line",
  moon: "moon-line",
  newspaper: "newspaper-line",
  note: "mark-pen-line",
  percent: "percent-line",
  pinyin: "pinyin-input",
  place: "earth-line",
  plan: "calendar-todo-line",
  "poetry-society": "home-8-line",
  quote: "double-quotes-l",
  reader: "book-mark-line",
  rhyme: "volume-down-line",
  search: "search-line",
  share: "share-line",
  sort: "arrow-up-down-line",
  "sort-down": "sort-desc",
  "sort-up": "sort-asc",
  sound: "volume-up-line",
  star: "star-line",
  "star-fill": "star-fill",
  start: "play-circle-line",
  style: "palette-line",
  sun: "sun-line",
  translate: "translate",
  tune: "disc-line",
  upload: "upload-2-fill",
  user: "user-3-fill",
  x: "close-line",
};

var titleMap = {
  add: "添加",
  authors: "作者",
  back: "返回",
  bookmark: "好书",
  brush: "书写",
  comments: "评论",
  delete: "删除",
  edit: "编辑",
  elink: "外站链接",
  emotion: "情感",
  home: "首页",
  hot: "热门",
  "hot-fill": "热度",
  list: "目录",
  note: "笔记",
  pinyin: "注音",
  quote: "引用",
  search: "搜索",
  sort: "排序",
  "sort-down": "降序",
  "sort-up": "升序",
  star: "标星",
  "star-fill": "星星",
  sound: "读音",
  translate: "翻译",
  upload: "上传",
  user: "用户",
};
export default {
  props: ["i", "n", "title"],
  computed: {
    iconClass() {
      if (this.i in nameMap) {
        return "ri-" + nameMap[this.i];
      } else {
        return "ri-question-line";
      }
    },
    getTitle() {
      if (this.title) {
        return this.title;
      }
      if (this.i in titleMap) {
        return titleMap[this.i];
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="stylus">
.icon-button
  display inline-block
  cursor pointer
  vertical-align middle

  i
    margin-right 0.1vw

  &:hover
    color #409EFF
</style>

